<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<el-button type="primary" size="small" @click="add">
				<template #default>
					<span class="text-sm">{{ $t('goods.corner.add') }}</span>
				</template>
			</el-button>

			<el-button v-prmis="'goods_corner_takeDown'" type="primary" size="small" @click="shelves">
				<template #default>
					<span class="text-sm">{{ $t('goods.corner.remove') }}</span>
				</template>
			</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange">
				<el-table-column type="index" width="55" :label="$t('public.No')" />
				<el-table-column type="selection" width="55" :selectable="selectable" />

				<el-table-column prop="corner_type" :label="$t('goods.corner.type')">
					<template #default="scope">
						{{ getinfo(scope.row.corner_type, 'corner_type') }}
					</template>
				</el-table-column>

				<el-table-column prop="corner_name" :label="$t('goods.corner.name')">
					<template #default="scope">
						{{ scope.row.corner_name || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="pic" :label="$t('goods.corner.image')">
					<template #default="scope">
						<img class="w-20 h-20 inline-block" :src="geturlimg(scope.row)" />
					</template>
				</el-table-column>

				<el-table-column prop="machineList" :label="$t('machine.marketing.Applicable')">
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="suit(scope.row.machineList, 1)">
							{{ scope.row.machineList.length }}{{ $t('goods.corner.machine') }}
						</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="goodsList" :label="$t('goods.corner.applica')">
					<template #default="scope">
						<el-link type="primary" :underline="false" @click="suit(scope.row.goodsList, 2)">
							{{ scope.row.goodsList.length }}{{ $t('goods.corner.goods') }}
						</el-link>
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('goods.corner.status')">
					<template #default="scope">
						<el-tag type="info" v-if="scope.row.status == 1">{{ $t('goods.corner.not') }}</el-tag>
						<el-tag type="success" v-if="scope.row.status == 2">{{ $t('goods.corner.use') }}</el-tag>
						<el-tag type="warning" v-if="scope.row.status == 3">{{ $t('goods.corner.ended') }}</el-tag>
						<el-tag type="danger" v-if="scope.row.status == 4">{{ $t('goods.corner.removed') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="start_time" :label="$t('date.applyTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.start_time, 1) }} / {{ getPlevel.gettime(scope.row.end_time, 1) }}
					</template>
				</el-table-column>

				<el-table-column prop="refund_trade_no" :label="$t('public.operate')">
					<template #default="scope">
						<el-button type="primary" size="small" v-if="scope.row.status == 1"
							@click="modify(scope.row)">{{ $t('public.modify') }}</el-button>
						<el-button v-prmis="'goods_corner_del'" type="danger" size="small" @click="del(scope.row.id)">{{
							$t('public.del')}}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.corner" @exposeData="current" @fraction="fraction" />

		</div>

		<!-- 查看设备、商品 -->
		<el-dialog v-model="data.demonstrate" :title="data.title" center width="40%" class="h-3/4 overflow-auto">
			<el-table :data="data.mcgoods" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<machine v-if="data.mcgtype == 1" />
				<goods v-if="data.mcgtype == 2" />
			</el-table>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import imagesMap from '@/assets/images_Js.ts';
import getPlevel from '@/utils/level'
import machine from './common/machine.vue';
import goods from './common/goods.vue';
import { getcornerList, delcornerList, takecornerDown } from '@/api/goods';
import { useRouter } from "vue-router";

const router = useRouter()

let data = reactive({
	mtloading: false, // 加载
	demonstrate: false, // 弹窗
	title: '', //弹窗标题
	mcgoods: [], // 适用设备、适用商品
	fdID: [], // 选中的角标
	mcgtype: 1, // 弹窗类型
	lookup: [ // 筛选栏
		{ title: $t('goods.corner.name'), type: 'input', value: '', key: 'corner_name' },
		{ title: $t('goods.corner.type'), type: 'define', select: [], value: '', key: 'corner_type' },
		{ title: $t('goods.corner.image'), type: 'define', select: [], value: '', key: 'style' },
		{ title: $t('goods.corner.position'), type: 'define', select: [], value: '', key: 'position' },
		{ title: $t('goods.corner.status'), type: 'define', select: [], value: '', key: 'status' },
		{ title: $t('date.forceTime'), type: 'picker', value: '', key: 'start_time' },
	],
	list: [], // 列表信息
	corner: { // 筛选数据
		corner_type: '',
		style: '',
		position: '',
		status: '',
		start_time: '',
		page: 1,
		pageNum: 15
	}
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getcornerList(data.corner).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 数值状态
// e：值，k：字段名
let getinfo = (e, k) => {
	let obj = {
		corner_type: [{ label: $t('goods.corner.new'), value: 1 }, { label: $t('goods.corner.explosive'), value: 2 }, { label: $t('goods.corner.hot'), value: 3 }],
		style: [{ label: $t('goods.corner.circle'), value: 1 }, { label: $t('goods.corner.triangle'), value: 2 }, { label: $t('goods.corner.shaped'), value: 3 }],
		position: [{ label: $t('goods.corner.left'), value: 1 }, { label: $t('goods.corner.right'), value: 2 }],
		status: [{ label: $t('goods.corner.not'), value: 1 }, { label: $t('goods.corner.use'), value: 2 }, { label: $t('goods.corner.ended'), value: 3 }, { label: $t('goods.corner.removed'), value: 4 }]
	}

	if (e == '') {
		for (let item of data.lookup) {
			if (item.key == 'corner_type' || item.key == 'style' || item.key == 'position' || item.key == 'status') {
				item.select = obj[item.key]
			}
		}
		return
	}

	for (let item of obj[k]) {
		if (item.value == e) {
			return item.label
		}
	}
}

// 获取角标图片
let geturlimg = (e) => {
	let url = e.pic
	if (url == '') {
		// 左上角、右上角 position
		let iposition = ['left_', 'right_']
		// 品类 新品、爆品、热销 corner_type
		let icategory = ['new_', 'burst_', 'heat_']
		// 形态 圆形、三角、Q形 style
		let iform = ['circular', 'triangle', 'q']
		url = imagesMap[iposition[e.position - 1] + icategory[e.corner_type - 1] + iform[e.style - 1]]
	}
	return url
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.corner[key] = e[key]
	}
	data.corner.page = 1
	data.corner.pageNum = 15
	getlist()
}

// 查看使用设备、使用商品
let suit = (e, k) => {
	data.mcgtype = k
	data.title = $t('machine.marketing.Applicable')
	if (k == 2) {
		data.title = $t('goods.corner.applica')
	}
	data.mcgoods = e
	data.demonstrate = true
}

// 添加角标
let add = () => {
	router.push({ path: '/goods/corner/add_info' })
}

// 修改角标
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/goods/corner/details_info', query: query })
}

// 选中的角标
let handleSelectionChange = (e) => {
	data.fdID = []
	for (let item of e) {
		data.fdID.push(item.id)
	}
}

// 是否允许被选中
let selectable = (e) => {
	let status = true
	if (e.status == 4 || e.status == 3) {
		status = false
	}
	return status
}

// 下架角标
let shelves = () => {
	if (data.fdID.length == 0) {
		ElMessage({
			message: $t('message.pleaseDown'),
			type: 'error'
		})
		return
	}
	let obj = {
		id: data.fdID.join(',')
	}

	ElMessageBox.confirm('此操作将永久下架商品角标，是否继续？', '温馨提示！')
		.then(res => {
			takecornerDown(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.downSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 删除角标
let del = (e) => {
	ElMessageBox.confirm('此操作将永久删除商品角标，是否继续？', '温馨提示！')
		.then(res => {
			delcornerList({ id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 页数回调
let current = (e) => {
	data.corner.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.corner.pageNum = e
	getlist()
}

getinfo('')
getlist()

</script>
